<template>
  <div id="welcome-box">
    <globle-linear-border class="top-box">
      <hello></hello>
    </globle-linear-border>
    <globle-linear-border class="bottom-box">
      <course-table class="scourse-table" v-if="courseTableData" :data="courseTableData" :open-type="openType"></course-table>
    </globle-linear-border>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { ICourseTable, IAllCourseParams, APIData } from '../../../type';
import Hello from './components/Hello.vue';
import CourseTable, { courseTableType } from '../../../components/courseTable/Index.vue';

const userStore = useUserStore();
const api = useAPI();

onMounted(() => {
  getData();
});

const courseTableData = ref<ICourseTable[]>();
const openType = ref(courseTableType.default);

const getData = async () => {
  const params: IAllCourseParams = { stage: userStore.currentStage, department: userStore.currentDepartment };
  const res: APIData = await api.findAllByPost(params, userStore.role, 'courseTable');
  if (res.code === 200) courseTableData.value = res.data.rows;
  else ElMessage.error(res.message);
  // console.log(res);

  return res.code;
};
</script>

<style lang="scss" scoped>
#welcome-box {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top-box {
    height: 15%;
  }

  .bottom-box {
    height: 83%;
    .scourse-table {
      padding: 16px;
    }
  }
}
</style>
